<template>
	<view class="warp">
		<my-loading :vshow="loadingshow"></my-loading>
		<u-navbar :is-back="false" :background="background" height="44">
			<view class="topSearch" @click="goSeach">
				<u-search
					placeholder="输入关键词搜索" 
					v-model="keyword"
					:show-action="false"
					>
				</u-search>
			</view>
		</u-navbar>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="content">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="item,k in swiperList" :key="k">
						<image style="width: 100%;height: 100%;" :src="item.img" @click="swiperOnclick(item.path)"></image>
					</swiper-item>
				</swiper>
				<view class="hireSellcolumn">
					<view class="column-top">
						<u-tabs
							active-color="#3c9cff"
							:list="sellcolumnhirelist" 
							:is-scroll="false" 
							:current="sellcolumnhirecurrent" 
							@change="sellcolumnhirechange"
							>
						</u-tabs>
					</view>
					<view class="column-content">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
							<navigator class="scroll-view-item_H" v-for="item in hirelist" :key="item.id" :url="'../../pagesC/productHire/productHire?id='+item.id">
								<view class="content-img">
									<image :src="item.prolist[0].url" mode=""></image>
								</view>
								<view class="content-name">
									{{item.name}}
								</view>
								<view class="content-price">
									{{item.price}}/天
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>
				<view class="sellcolumn">
					<view class="column-top">
						<u-tabs
							active-color="#3c9cff"
							:list="sellcolumnTabslist" 
							:is-scroll="false" 
							:current="sellcolumnTabscurrent" 
							@change="sellcolumnTabschange"
							>
						</u-tabs>
					</view>
					<view class="column-content">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
							<navigator class="scroll-view-item_H" v-for="item in sellcolumnList" :key="item.id" :url="'../../pagesA/productA/productA?id='+item.id">
								<view class="content-text" v-show="item.bookingQuantity != 0 && item.bookingQuantity != 'null' && item.saleStatus == 1">
									已有{{item.bookingQuantity}}人预订
								</view>
								<view class="content-text-x" v-show="item.saleStatus == 2">
									车辆已出售
								</view>
								<view class="content-img">
									<image :src="item.thumbs_text[0]" mode=""></image>
								</view>
								<view class="content-name">
									{{item.name}}
								</view>
								<view class="content-price">
									{{item.price}}万
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>
				<view class="type" @click="goSeach">
					<view class="type-top">
						<view class="top-list" v-for="item in brandlist" :key="item.id">
							<view class="icon">
								<image :src="item.thumb_text" mode=""></image>
							</view>
							<view class="brandname">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="cart_box">
						<view class="cart-item" v-for="item in screenList" :key="item.id">
							{{item.name}}
						</view>
					</view>
				</view>
				
				<view class="serverSwiper">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="item,k in serverSwiper" :key="k">
							<image style="width: 100%;height: 100%;" :src="item.squareImage" @click="goserverDetail(item.id)"></image>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="server">
					<view class="server-detail">
						<u-waterfall v-model="flowList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goserverDetail(item.id)">
									<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
									<u-lazy-load threshold="-450" border-radius="10" :image="item.squareImage" :index="index"></u-lazy-load>
									<view class="demo-title">
										{{item.title}}
									</view>
									<view class="demo-price">
										{{item.free}}元
									</view>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goserverDetail(item.id)">
									<u-lazy-load threshold="-450" border-radius="10" :image="item.squareImage" :index="index"></u-lazy-load>
									<view class="demo-title">
										{{item.title}}
									</view>
									<view class="demo-price">
										{{item.free}}元
									</view>
								</view>
							</template>
						</u-waterfall>
						<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
					</view>
				</view>
			</view>
			<view class="" style="height: 150rpx;">
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingshow: false,
				background: {
					backgroundColor: '#9acafc',
				},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				keyword: '',
				offsetTop: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				sellcolumnTabslist: [
					{
						name: '名表推荐'
					}
				],
				sellcolumnhirelist: [
					{
						name: '好表推荐'
					}
				],
				topTabscurrent: 0,
				sellcolumnTabscurrent: 0,
				sellcolumnhirecurrent: 0,
				brandlist: [],
				screenList: [
					{
						name: '5万以下',
						id: 1
					},
					{
						name: '5-10万',
						id: 2
					},
					{
						name: '10-15万',
						id: 3
					},
					{
						name: '15-25万',
						id: 4
					},
					{
						name: '25万以上',
						id: 5
					}
				],
				flowList: [],
				sellcolumnList: [],
				hirelist: [],
				swiperList: [],
				serverSwiper: [],
			}
		},
		onLoad() {
			this.getbrandNamelist()
			this.gettabslist()
			this.getsellcolumnList()
			this.getcolumnhireList()
			this.getSwiper()
			this.getServerSwiper()
			this.getTuijianServer()
		},
		onReachBottom() {
			
		},
		methods: {
			getTuijianServer() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/Carpark/Carpark/getQitaServer',
					method: 'POST',
					data: {
						serverid: 0,
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.flowList = res.data.data
					}
				});
			},
			goserverDetail(id) {
				let item = {
				    serverId: id,
					stoid: 1,
				};
				uni.navigateTo({
					url: '/pagesB/server/serverDetail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			},
			swiperOnclick(url) {
				uni.navigateTo({
					url: url
				})
			},
			getSwiper() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/index/indexpic',
					method: 'GET',
					data: {
						name: '首页广告轮播图',
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.swiperList = res.data.data
					}
				});
			},
			getServerSwiper() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/carpark/carpark/getServerSwiper',
					method: 'POST',
					data: {
						name: '首页服务轮播图',
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.serverSwiper = res.data.data
					}
				});
			},
			goSeach() {
				uni.navigateTo({
					url: '/pagesA/productA/productSeach'
				})
			},
			getbrandNamelist() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/product/brank/brankNamelist',
					method: 'POST',
					data: {
						name: '首页图标',
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.brandlist = res.data.data
					}
				});
			},
			gettabslist() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/product/product/tabslist',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.list = res.data.data
					}
				});
			},
			
			getsellcolumnList() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/product/product/sellcolumnList',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.sellcolumnList = res.data.data
					}
				})
			},
			getcolumnhireList() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/hire/getcolumnhireList',
					method: 'POST',
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.hirelist = res.data.data
					}
				})
			},
			sellcolumnTabschange(index) {
				this.sellcolumnTabscurrent = index;
			},
			sellcolumnTabschange(index) {
				this.sellcolumnTabscurrent = index;
			},
			topTabschange(index) {
				this.topTabscurrent = index;
			},
			upper: function(e) {},
			lower: function(e) {},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f7fb;
}
.scroll-Y {
	height: 745px;
}
.warp {
	.topSearch {
		width: 100%;
	}
	.topTabs {
		width: 100%;
		background-color: #fff;
		.topTabsitem {
			width: 40%;
		}
	}
	.content {
		height: auto;
		.swiper {
			height: 750rpx;
			.swiper-item {
				display: block;
				height: 750rpx;
				line-height: 750rpx;
				text-align: center;
			}
		}
		.sellcolumn, .hireSellcolumn {
			width: 95%;
			margin: 15rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 5rpx;
			.column-top {
				width: 25%;
			}
			.column-content {
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					.scroll-view-item_H {
						display: inline-block;
						width: 31%;
						margin-left: 20rpx;
						border: 1rpx solid #f2f2f2;
						border-radius: 20rpx;
						.content-img {
							width: 100%;
							height: 160rpx;
							image {
								width: 100%;
								height: 100%;
								object-fit: contain;
								border-top-left-radius: 20rpx;
								border-top-right-radius: 20rpx;
								border-bottom: 1px solid #fff;
							}
						}
						.content-text{
							text-align: center;
							background-color: #d4237a;
							color: white;
						}
						.content-text-x{
							text-align: center;
							background-color: #7F7F7F;
							color: white;
						}
						.content-name {
							font-size: 30rpx;
							color: black;
							margin: 10rpx 0 0 10rpx;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
						.content-price {
							font-size: 30rpx;
							color: orange;
							margin: 10rpx 10px 10px 10rpx;
							text-align: right;
						}
					}
				}
				.columncontent {
					
				}
				
			}
		}
		.type {
			padding: 10rpx;
			width: 95%;
			margin: 10rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			.type-top {
				width: 100%;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-around;
				.top-list{
					width: 15%;
					height: 100rpx;
					margin-top: 15rpx;
					.icon {
						height: 60rpx;
						border-radius: 50rpx;
						image {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}
					.brandname{
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
			.cart_box {
				margin-top: 15rpx;
				margin-bottom: 10rpx;
				display: flex;
				justify-content: space-around;
				.cart-item {
					height: 70rpx;
					line-height: 70rpx;
					width: 120rpx;
					font-size: 26rpx;
					background-color: #f5f6f7;
					padding: 5rpx;
					color: #313038;
					text-align: center;
				}
			}
		}
		.serverSwiper {
			.swiper {
				height: 700rpx;
				.swiper-item {
					display: block;
					height: 650rpx;
					line-height: 650rpx;
					text-align: center;
				}
			}
		}
		.server {
			width: 100%;
			height: 1000rpx;
			.server-detail {
				.demo-warter {
						border-radius: 8px;
						margin: 5px;
						background-color: #ffffff;
						padding: 8px;
						position: relative;
					}
					
					.u-close {
						position: absolute;
						top: 32rpx;
						right: 32rpx;
					}
					
					.demo-image {
						width: 100%;
						border-radius: 4px;
					}
					
					.demo-title {
						font-size: 30rpx;
						margin-top: 5px;
						color: $u-main-color;
					}
					
					.demo-tag {
						display: flex;
						margin-top: 5px;
					}
					
					.demo-tag-owner {
						background-color: $u-type-error;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
						font-size: 20rpx;
						line-height: 1;
					}
					
					.demo-tag-text {
						border: 1px solid $u-type-primary;
						color: $u-type-primary;
						margin-left: 10px;
						border-radius: 50rpx;
						line-height: 1;
						padding: 4rpx 14rpx;
						display: flex;
						align-items: center;
						border-radius: 50rpx;
						font-size: 20rpx;
					}
					
					.demo-price {
						font-size: 30rpx;
						color: $u-type-error;
						margin-top: 5px;
					}
					
					.demo-shop {
						font-size: 22rpx;
						color: $u-tips-color;
						margin-top: 5px;
					}
			}
		}
	}
}

</style>
